<template xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml">
  <div style="background: #eee">
    <group label-width="30vw">
      <x-input title="个人/企业名称" v-model="netcaseapplicant"></x-input>
      <selector title="申报类型" :options="list1" v-model="netcaseapplicanttype"></selector>
      <selector title="证件类型" :options="list2" v-model="netcaseapplicantpapertype"></selector>
      <x-input title="证件号码" v-model="netcaseapplicantpapercode"></x-input>
      <x-input title="申报人电话" type="tel" v-model="netcaseapplicantphone"></x-input>
      <x-input title="联系地址" v-model="netcaseapplicantaddress"></x-input>
      <x-input title="邮政编码" type="number" v-model="netcaseapplicantzipcode"></x-input>
      <x-input title="电子邮箱" type="email" v-model="netcaseapplicantemail"></x-input>
    </group>
    <div class="bd" v-for="item in titleItemsList">
      <div class="weui-cells__title"><span>{{ item.regionName }}</span>{{ item.head }}</div>

      <div class="weui-cells" v-if="item.items[0].type === 'desc'">
        <div class="weui-cells__tips" v-if="i.items">{{ item.items.desc }}</div>
      </div>
      <div class="weui_cells" v-if="item.items[0].type === 'input-text'">
        <div class="weui_cell">
          <div class="weui_cell_hd"><label class="weui_label">{{ item.items.label }}</label></div>
          <div class="weui_cell_bd weui_cell_primary">
            <input id="" name="" class="weui_input" type="number" pattern="[0-9]*"
                   v-bind:placeholder="请在此输入item.label"/>
          </div>
        </div>
      </div>
      <div class="weui-uploader" style="padding:15px;" v-if="item.items[0].type === 'input-file'">
        <div class="weui-uploader__bd">
          <ul class="weui-uploader__files" id="uploaderFiles">
            <li class="weui-uploader__file" v-for="(item, index) in imgList"
                :style="{ backgroundImage: 'url('+item+')' }">
              <div v-on:click="removeImg(index)">X</div>
            </li>
          </ul>
          <div class="weui-uploader__input-box">
            <input id="uploaderInput" class="weui-uploader__input" type="file" accept="image/*" multiple
                   @change="handleFileChange" ref="imgInput"/>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import Group from 'vux/src/components/group/index'
  import XInput from 'vux/src/components/x-input/index'
  import Selector from 'vux/src/components/selector/index'

  export default {
    components: {
      Group,
      XInput,
      Selector
    },
    methods: {
      selectMaterialCfg () {
        let url = 'https://ydt.xy12345.cn/edot/work/material/selectMaterialCfg1.do?workCode=' + this.workCode
        this.$axios.get(url).then(response => {
          this.titleItemsList = response.data.data.titleItemsList
        })
      },
      submits () {
      },
      // 图片转换为base64
      handleFileChange (e) {
        let inputDOM = this.$refs.imgInput
        let reader = new FileReader()
        reader.readAsDataURL(inputDOM.files[0])
        reader.onload = () => {
          this.imgList.push(reader.result)
        }
      },
      removeImg (index) {
        this.imgList.splice(index, 1)
      }
    },
    data () {
      return {
        workCode: this.$route.params.id,
        titleItemsList: [],
        list1: [
          {key: '个人', value: '个人'},
          {key: '企业', value: '企业'}
        ],
        list2: [
          {key: '身份证', value: '身份证'},
          {key: '组织机构代码证', value: '组织机构代码证'},
          {key: '护照', value: '护照'},
          {key: '回乡证', value: '回乡证'},
          {key: '居住证', value: '居住证'},
          {key: '军官证', value: '军官证'},
          {key: '特区护照', value: '特区护照'},
          {key: '通行证', value: '通行证'},
          {key: '台胞证', value: '台胞证'},
          {key: '营业执照', value: '营业执照'},
          {key: '注册证书', value: '注册证书'},
          {key: '其他', value: '其他'}
        ],
        netcaseapplicant: JSON.parse(localStorage.user).realName,
        netcaseapplicanttype: '个人',
        netcaseapplicantpapertype: '身份证',
        netcaseapplicantpapercode: '',
        netcaseapplicantphone: JSON.parse(localStorage.user).phoneNo,
        netcaseapplicantaddress: '',
        netcaseapplicantzipcode: '',
        netcaseapplicantemail: '',
        imgList: []
      }
    },
    mounted () {
      this.$store.commit('updataTitleStatus', '在线申报')
      this.selectMaterialCfg()
    }
  }
</script>

<style lang="less" scoped>
  @import '~vux/src/styles/weui/widget/weui-uploader/index.less';
  @import '~vux/src/styles/weui/widget/weui_cell/weui_cell_global.less';

  .weui-uploader__file div {
    width: 25px;
    border: 1px solid #ddd;
    background: #fafafa;
    text-align: center;
    border-radius: 50%;
    line-height: 25px;
    float: right;
  }

  .weui-cells__title span {
    background: #efa530;
    display: inline-table;
    line-height: 30px;
    text-align: center;
    width: 30px;
    font-size: 20px;
    color: #fff;
    margin-right: 10px;
  }

  .weui-cells {
    background-color: #ffffff;
  }

  .weui-uploader {
    background-color: #ffffff;
  }
</style>
